<template>
	<view class="content">
		<view v-if="serviceItemInfo.productSku" class="order-info">
			<text class="txt1">所选服务</text>
			<view class="txt2">
				<text class="txt2-1">服务名称</text>
				<text class="txt2-2 ">{{serviceItemInfo.name}}</text>
			</view>
			<text class="txt1">所选产品</text>
			<view class="txt2">
				<text class="txt2-1">产品名称</text>
				<text class="txt2-2">{{serviceItemInfo.productSku.productName}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">产品价格</text>
				<input class="txt2-2 txt-ipt" v-model="actualPrice_p" />
				<text class="txt2-2">元</text>
			</view>
		</view>

		<view v-else class="order-info">
			<text class="txt1">所选服务</text>
			<view class="txt2">
				<text class="txt2-1">服务名称</text>
				<text class="txt2-2 ">{{serviceItemInfo.name}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">服务价格</text>
				<input class="txt2-2 txt-ipt" v-model="actualPrice_s" /> <text class="txt2-2">元</text>
			</view>
		</view>
		<view class="btns">
			<view class="btn btn1" @click="cancel">
				取消修改
			</view>
			<view class="btn btn2" @click="confirm">
				确认修改
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		api_serviceItem_list,
		api_serviceItem_update,
		api_productSku_update
	} from "../../../../../apis/apis.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"


	const serviceItemInfo = ref({});
	const actualPrice_s = ref(0.01);
	const actualPrice_p = ref(0.01)


	//取消修改
	const cancel = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	//确认修改
	const confirm = async () => {
		if (actualPrice_p.value == 0.01) {
			try {
				await api_serviceItem_update({
					name: serviceItemInfo.value.name,
					serviceItemId: serviceItemInfo.value.serviceItemId,
					orderServiceId: serviceItemInfo.value.orderServiceId,
					actualPrice: parseInt(actualPrice_s.value),
					standardPrice: parseInt(serviceItemInfo.value.standardPrice),
				});
			} catch (e) {
				uni.showToast({
					title: e.msg,
					icon: "none"
				});
			}

		} else {
			try {
				await api_productSku_update({
					id: serviceItemInfo.value.productSku.id,
					serviceItemId: serviceItemInfo.value.serviceItemId,
					productId: serviceItemInfo.value.productSku.productId,
					productNum: 1,
					actualPrice: parseInt(actualPrice_p.value),
					standardPrice: parseInt(serviceItemInfo.value.productSku.standardPrice),
				});
			} catch (e) {
				uni.showToast({
					title: e.msg,
					icon: "none"
				});
			}
		}
		uni.navigateBack({
			delta: 1,
			succes() {
				uni.showToast({
					title: "完成!",
					icon: 'success'
				});
			}
		});
	}

	onLoad(async (e) => {
		let param = {
			orderServiceId: e.orderServiceId,
			name: e.name
		};
		//查询服务详情
		try {
			let res = await api_serviceItem_list(param);
			serviceItemInfo.value = res.data[0];
			actualPrice_s.value = res.data[0].actualPrice;
			actualPrice_p.value = res.data[0].productSku.actualPrice;
			console.log(serviceItemInfo.value);
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}

	});
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		height: auto;

		.order-info {
			width: 700rpx;
			height: auto;
			display: flex;
			flex-direction: column;
			align-items: left;
			gap: 10rpx;
			margin-top: 50rpx;

			.txt1 {
				font-family: Alibaba_PuHuiTi_Medium;
				font-weight: 500;
				font-size: 34rpx;
				color: $font-primary-color;
			}

			.txt2 {
				display: flex;
				align-items: center;

				.txt2-1 {
					width: 160rpx;
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 34rpx;
					color: $font-primary-color;
					margin-right: 30rpx;
				}

				.txt2-2 {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 36rpx;
					color: $font-sub-color;

				}

				.txt-ipt {
					width: 110rpx;
					border-bottom: 1rpx solid $border-color;
					color: #FF602B;
					text-align: center;
				}
			}
		}

		.btns {
			width: 700rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;

			.btn {
				width: 320rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 100rpx;
				overflow: hidden;
				font-family: Alibaba_PuHuiTi_Light;
				font-weight: 300;
				font-size: 34rpx;
			}

			.btn1 {
				border: 1rpx solid $primary-color;
				color: $primary-color;
			}

			.btn2 {
				background-color: $primary-color;
				color: #fff;
			}
		}
	}
</style>